<template>
	<view class="wrap">
		<!-- <view class="topSearch u-flex">
			<view class="dateTime">
				<text>测试人员：</text>
				<input v-model="userName" placeholder="请选择测试人员" disabled @click="nameShow = true" />
				<text>问卷类型：</text>
				<input v-model="questionType" disabled placeholder="请选择问卷类型" @click="typeShow = true" />
				<u-button style="margin-left:10rpx;" type="primary" size="mini">确认</u-button>
			</view>
		</view> -->
		<view class="questionMode">
			<view class="questionType">单选题</view>
			<view class="item">
				<view class="title">1.灭火的方式有哪些？</view>
				<view class="options">
					<u-radio-group @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="questionType">多选题</view>
			<view class="item">
				<view class="title">1.灭火可以用说明工具？</view>
				<view class="options">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-for="(item, index) in checkList" :key="index" v-model="item.checked">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="questionType">问答题</view>
			<view class="item">
				<view class="title">1.灭火的方式有哪些？</view>
				<view class="textArea"><textarea placeholder="请输入答案"></textArea></view>
			</view>
		</view>
		<u-picker mode="time" v-model="timerShow" :params="params" @confirm="timerConfirm"></u-picker>
		<u-select mode="single-column" :list="nameList" v-model="nameShow" @confirm="selectConfirm('type')"></u-select>
		<u-select mode="single-column" :list="typeList" v-model="typeShow" @confirm="selectConfirm('name')"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userName: '',
			value: false,
			questionType: '',
			timerShow: false,
			typeList: [{value:'心里健康',label:'心里健康'},{value:'身体健康',label:'身体健康'}],
			typeShow: false,
			nameList: [{value:'张珊',label:'张珊'},{value:'刘伟',label:'刘伟'},{value:'蒙古路',label:'蒙古路'}],
			nameShow: false,
			params: {
				year: true,
				month: true,
				day: true
			},
			checkList:[{
					name: 'apple',
					checked: false,
					disabled: false
				},
				{
					name: 'banner',
					checked: false,
					disabled: false
				},
				{
					name: 'orange',
					checked: false,
					disabled: false
				}],
			radioList:[{
				name:'答案一',
				id:0
			},{
				name:'答案二',
				id:1
			},{
				name:'答案三',
				id:2
			},{
				name:'答案四',
				id:3
			}]
		};
	},
	methods: {
		addPage(url) {
			this.$u.route({
				url: url
			});
		},
		selectConfirm(e) {},
		timerConfirm(e) {
			this.myDate = `${e.year}-${e.month}-${e.day}`;
		},
		radioChange(){},
		radioGroupChange(){},
		checkboxChange(){},
		checkboxGroupChange(){}
	}
};
</script>

<style lang="scss" scoped>
.topSearch {
	padding: 20rpx;
	.dateTime {
		line-height: 56rpx;
		font-size: 22rpx;
		text {
			float: left;
		}
		input {
			font-size: 22rpx;
			float: left;
			width: 200rpx;
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 10rpx;
			border: 1px solid #d9d9d9;
			border-radius: 0.3em;
		}
	}
}
</style>
